import { connect } from 'dva';
import React, { useEffect, useState } from 'react';
import styles from './index.less';
import config from '../../config';


const home = props => {
  const { form, dispatch } = props;
  const [height, setHeight] = useState(0);
  const [width, setWidth] = useState(0)
  const [list, setList] = useState([])
  const [page, setPage] = useState({})

  const resizeUpdate = (e) => {
    // 通过事件对象获取浏览器窗口的高度
    let h = e.target.innerHeight;
    let w = e.target.innerWidth;
    setHeight(h);
    setWidth(w)
  };

  useEffect(() => {
    dispatch({
      type: 'Public/getContentList',
      payload: { categoryId: props.id }
    }).then((res) => {
      setList(res?.data?.rows || [])
    })
    dispatch({
      type: 'Public/getCategoryGet',
      payload: { id: props.id }
    }).then((res) => {
      setPage(res?.data || [])
    })
    // 页面刚加载完成后获取浏览器窗口的大小
    let h = window.innerHeight;
    let w = window.innerWidth;
    setHeight(h)
    setWidth(w)
    // 页面变化时获取浏览器窗口的大小 
    window.addEventListener('resize', resizeUpdate);

    return () => {
      // 组件销毁时移除监听事件
      window.removeEventListener('resize', resizeUpdate);
    }
  }, []);
  const banner = page?.categoryImg && JSON.parse(page?.categoryImg)
  return (
    <>
      {
        width > 700 ?
          <div className={styles.case}>
            <div className={styles.bannerImg}>
              <img src={config.targetUrl + banner?.[0]?.path} height="100%" width="100%" />
            </div>
            <div className={styles.relation}>
              <div className={styles.title}>多款案例展示</div>
              <div style={{ padding: '0 20%', width: '100%' }}>
                {
                  list.map(i => {
                    const tag = i?.contentKeyword?.split('；') || []
                    const contentImg = i?.contentImg && JSON.parse(i?.contentImg)
                    return <div className={styles.caseList}>
                      <div className={styles.caseLeft}>
                        <div className={styles.title}>{i?.contentTitle}</div>
                        <div className={styles.describe}>{i?.contentDescription}</div>
                        <div className={styles.tagList}>
                          {
                            tag?.map(v => {
                              return <div className={styles.labelInfo}>
                                <img src={'https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng2dee15ac1baef3a57e12ae54841e24bccecd52e837c8957fbdb8c8ec16a04089'} style={{ width: 26, height: 26 }} />
                                <div className={styles.label}>{v}</div>
                              </div>
                            })
                          }
                        </div>
                      </div>
                      <div className={styles.caseRight}>
                        <img src={config.targetUrl + contentImg?.[0]?.path} style={{ width: '100%', height: 390 }} />
                      </div>
                    </div>
                  })
                }
              </div>
            </div>
          </div> :
          <div className={styles.mini_case}>
            <div className={styles.bannerImg}>
              <img src={config.targetUrl + banner?.[0]?.path} height="100%" width="100%" />
            </div>
            <div className={styles.mini_relation}>
              <div className={styles.mini_title}>精彩案例</div>
              <div style={{ padding: '0 20px', width: '100%' }}>
                {
                  list.map(i => {
                    const tag = i?.contentKeyword?.split('；') || []
                    const contentImg = i?.contentImg && JSON.parse(i?.contentImg)
                    return <div className={styles.mini_caseList}>
                      <div className={styles.mini_title}>{i?.contentTitle}</div>
                      <div className={styles.mini_describe}>{i?.contentDescription}</div>
                      <div className={styles.mini_tagList}>
                        {
                          tag?.map(v => {
                            return <div className={styles.mini_labelInfo}>
                              <img src={'https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng2dee15ac1baef3a57e12ae54841e24bccecd52e837c8957fbdb8c8ec16a04089'} style={{ width: 26, height: 26 }} />
                              <div className={styles.mini_label}>{v}</div>
                            </div>
                          })
                        }
                      </div>
                      <div className={styles.mini_caseRight}>
                        <img src={config.targetUrl + contentImg?.[0]?.path} style={{ width: '100%' }} />
                      </div>
                    </div>
                  })
                }
              </div>
            </div>
          </div>
      }
    </>

  );
};

export default connect(({ }) => ({}))(home);
